<template>
  <div class="car">
    <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-arrow
      right-text="编辑"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-notice-bar
      left-icon="volume-o"
      text="618大促，优惠多多，快来为你的爱宠获取一份爱心礼物吧！！！"
    />

    <main>
      <van-empty
        v-if="isShow"
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="您的购物车空空如也"
      >
        <router-link to="/feilei">
          <van-button round class="bottom-button">去逛一逛</van-button>
        </router-link>
      </van-empty>
      <div v-else v-for="(item, index) in cartList" :key="index" class="outbox">
        <div class="check-box">
          <div class="outer-box" @click="handleCheck(index)">
            <van-icon :name="cartList[index].isCheck ? 'passed' : ''" />
          </div>
        </div>
        <van-card
          :num="item.count"
          :price="item.price.toFixed(2)"
          :desc="item.subtitle"
          :title="item.title"
          :thumb="item.img"
        >
          <template #tags>
            <van-tag plain type="danger">正品</van-tag>
            <van-tag plain type="danger">便宜</van-tag>
          </template>

          <template #footer>
            <van-button size="small" @click="decrease(index)">-</van-button>
            <van-button size="small" @click="increase(index)">+</van-button>
          </template>
        </van-card>
      </div>
      <div class="goodItem"></div>
    </main>

    <van-submit-bar
      :price="info.totalMoney * 100"
      button-text="提交订单"
      @submit="onSubmit()"
    >
      <div class="allCheck">
        <div class="outer-box" @click="handleCheckAll(info.allCheck)">
          <van-icon :name="info.allCheck ? 'passed' : ''" />
        </div>
        <span>全选</span>
      </div>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false, //是否显示空购物车
      // checked: true, //全选
      radio: false,
      // isCheck:true   //复选
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      // console.log(location.hash);
    },

    onSubmit() {
      //提交订单
      if (this.info.cartCount || this.info.totalMoney) {
        this.$router.push({ path: "/form" });
      }
    },
    decrease(index) {
      //数量减减
      this.$store.commit("gcart/goodDecrease", index);
    },
    increase(index) {
      //数量加加
      this.$store.commit("gcart/goodIncrease", index);
    },
    handleCheck(idx) {
      //单选
      this.$store.commit("gcart/singleCheck", idx);
      // console.log(idx)
    },
    handleCheckAll(bool) {
      //多选
      this.$store.commit("gcart/checkAll", bool);
    },
  },
  computed: {
    cartList() {
      //获取状态机购物车信息
      return this.$store.state.gcart.cartList;
    },
    info() {
      //获取所有商品信息
      return this.$store.getters["gcart/info"];
    },
  },
};
</script>

<style scr="../assets/css/car.css" lang="less" scoped>
.bottom-button {
  width: 160px;
  height: 40px;
  border: 1px solid greenyellow;
}
.van-card__num {
  margin-right: 30px;
}
.van-card__header {
  padding-left: 10px;
}

.van-radio {
  position: absolute;
  top: 25px;
  left: -105px;
}

.van-card__footer {
  position: absolute;
  bottom: 5px;
  right: 18px;
  .van-button {
    margin-left: 20px;
  }
}
.van-submit-bar {
  margin-bottom: 48px;
}
.outbox {
  position: relative;
}
.outbox .check-box {
  position: absolute;
  left: 7px;
  top: 50px;
  transform: translateY(-50%);
  z-index: 1;
}

.car .allCheck {
  width: auto;
  height: 30px;
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.car .allCheck span {
  font-size: 14px;
}
.car .outer-box {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 1px #999;
  display: inline-block;
}
.outer-box .van-icon {
  color: #fff;
  font-size: 16px;
  background: #1989fa;
  border-radius: 50%;
}
.van-image {
  background: transparent !important;
}
.van-tag {
  margin-right: 10px;
}

.car {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.car .main {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  margin-bottom: 100px;
}
</style>